"""HydroPulse-DX 教学演示平台主应用

Streamlit主应用入口，整合时序数据库和PostGIS演示功能。
"""

import streamlit as st

from hydropulse.config.settings import get_database_config
from hydropulse.utils.logger import get_logger
from hydropulse.web.postgis_demo import render_postgis_demo
from hydropulse.web.timeseries_demo import render_timeseries_demo

# 页面配置
st.set_page_config(
    page_title="HydroPulse-DX 教学演示平台",
    page_icon="💧",
    layout="wide",
    initial_sidebar_state="expanded"
)

# 获取日志记录器
logger = get_logger(__name__)

# 自定义CSS样式
st.markdown("""
<style>
/* 主题色彩 */
:root {
    --primary-color: #1f77b4;
    --secondary-color: #ff7f0e;
    --success-color: #2ca02c;
    --warning-color: #d62728;
    --info-color: #17a2b8;
    --light-bg: #f8f9fa;
    --dark-bg: #343a40;
}

/* 卡片样式 */
.metric-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 1.5rem;
    border-radius: 15px;
    color: white;
    margin: 1rem 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.2);
}

.performance-card {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    padding: 1.5rem;
    border-radius: 15px;
    color: white;
    margin: 1rem 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.timeseries-card {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    padding: 1.5rem;
    border-radius: 15px;
    color: white;
    margin: 1rem 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.regular-card {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    padding: 1.5rem;
    border-radius: 15px;
    color: white;
    margin: 1rem 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

/* 标题样式 */
.main-title {
    text-align: center;
    color: #2c3e50;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.section-title {
    color: #34495e;
    font-size: 1.8rem;
    font-weight: 600;
    margin: 2rem 0 1rem 0;
    border-left: 4px solid #3498db;
    padding-left: 1rem;
}

/* 按钮样式 */
.stButton > button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.stButton > button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* 侧边栏样式 */
.css-1d391kg {
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}

/* 指标样式 */
.metric-container {
    background: rgba(255,255,255,0.9);
    padding: 1.5rem;
    border-radius: 15px;
    margin: 0.5rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-left: 4px solid #3498db;
}

/* 警告和信息框样式 */
.stAlert {
    border-radius: 15px;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 图表容器 */
.chart-container {
    background: white;
    padding: 1rem;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin: 1rem 0;
}
</style>
""", unsafe_allow_html=True)


def main():
    """主函数"""
    # 主标题
    st.markdown('<h1 class="main-title">💧 HydroPulse-DX 教学演示平台</h1>', unsafe_allow_html=True)

    # 副标题和说明
    st.markdown("""
    <div style="text-align: center; margin-bottom: 2rem; color: #7f8c8d;">
        <h3>大连理工大学 - 时序数据库与空间数据库教学演示系统</h3>
        <p>专为水文数据处理和空间分析教学设计的交互式演示平台</p>
    </div>
    """, unsafe_allow_html=True)

    # 侧边栏
    with st.sidebar:
        st.markdown("### 🎯 教学演示功能")
        st.markdown("""
        **本平台提供两大核心模块:**
        
        1. **⏰ 时序数据库演示**
           - TimescaleDB vs PostgreSQL 性能对比
           - 单测站时序数据查询测试
           - 多测站聚合统计分析
           - 实时性能监控与可视化
        
        2. **🌍 PostGIS空间数据演示**
           - 空间数据可视化展示
           - 点在多边形内查询
           - 多边形区域关系分析
           - 空间数据交互操作
        
        **💡 教学要点:**
        - 时序数据库优化特性
        - 空间数据库查询能力
        - 实际应用场景演示
        - 性能对比分析
        """)

        st.markdown("---")
        st.markdown("### ⚙️ 系统信息")
        db_config = get_database_config()
        st.info(f"数据库: {db_config['database']}\n主机: {db_config['host']}:{db_config['port']}")
        st.markdown("### 🏫 院校信息")
        st.info("大连理工大学\n辽宁省大连市")

    # 主要内容区域 - 使用选择框进行模块切换
    demo_type = st.selectbox(
        "选择演示模块",
        ["⏰ 时序数据库演示", "🌍 PostGIS空间数据演示"],
        help="选择要演示的功能模块"
    )

    if demo_type == "⏰ 时序数据库演示":
        render_timeseries_demo()
    elif demo_type == "🌍 PostGIS空间数据演示":
        render_postgis_demo()

    # 页脚
    st.markdown("---")
    st.markdown("""
    <div style="text-align: center; color: #95a5a6; padding: 2rem; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 15px; margin-top: 2rem;">
        <h4>💧 HydroPulse-DX 教学演示平台</h4>
        <p>大连理工大学 - 专业的数据库教学演示工具</p>
        <p><strong>适用场景:</strong> 数据库课程教学、性能分析演示、水文数据处理培训、空间数据分析教学</p>
        <p><strong>技术栈:</strong> TimescaleDB | PostgreSQL | PostGIS | Streamlit | Python</p>
    </div>
    """, unsafe_allow_html=True)


if __name__ == "__main__":
    main()
